<template>
  <div class="back">
    <van-nav-bar title="个人中心" left-text left-arrow flexed>
      <template #right>
        <van-icon name="wap-home-o" size="18" />
      </template>
    </van-nav-bar>
    <div>
      <div class="user">
        <div class="martl">
          <van-image round width="1.3rem" height="1.3rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        </div>
        <div class="mtop">
          <div>
            <p>{{info.name}}</p>
            <div class="font">
              <span>
                <span class="color">等级：</span>小蜜蜂
              </span>
              <span class="mleft">
                <span class="color">蜜粉值：</span>0
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="gird">
        <img
          src="https://mfile02.miyabaobei.com/resources/images/m/domain/individualCenter_1_01.png"
          alt
          class="backSize"
        />
        <img
          src="https://mfile02.miyabaobei.com/resources/images/m/domain/individualCenter_1_02.png"
          alt
          class="backSize"
        />
        <img
          src="https://mfile02.miyabaobei.com/resources/images/m/domain/individualCenter_1_03.png"
          alt
          class="backSize"
        />
        <img
          src="https://img.miyabaobei.com/d1/p5/2016/06/28/ca/83/ca83b650a1aac5b4b2aa2b20fdf4fcad006898559.png"
          alt
          class="backSize"
        />
        <img
          src="https://img.miyabaobei.com/d1/p5/2016/06/28/40/c2/40c205819f4c5418c40708f0240aea27007411966.png"
          alt
          class="backSize"
        />
      </div>
    </div>
    <div class="content">
      <ul>
        <li>
          <div class="gird line">
            <div class="gird">
              <img
                class="imgSize mleft"
                src="https://mfile03.miyabaobei.com/resources/images/m/domain/icoDomain_01.jpg"
                alt
              />
              <div class="mleft">优惠券</div>
            </div>
            <div class="discounts">
              <div class="mright">
                <span>0张未使用</span>
              </div>
              <img
                class="imgSize"
                src="https://mfile03.miyabaobei.com/resources/images/m/domain/icoDomain_04.png"
                alt
              />
            </div>
          </div>
        </li>
        <li>
          <div class="gird line">
            <div class="gird">
              <img
                class="imgSize mleft"
                src="https://mfile03.miyabaobei.com/resources/images/m/domain/icoDomain_03.jpg"
                alt
              />
              <div class="mleft">红包</div>
            </div>
            <div class="discounts">
              <div class="mright">
                <span>0张未使用</span>
              </div>
              <img
                class="imgSize"
                src="https://mfile03.miyabaobei.com/resources/images/m/domain/icoDomain_04.png"
                alt
              />
            </div>
          </div>
        </li>
        <li>
          <div class="gird line">
            <div class="gird">
              <img
                class="imgSize mleft"
                src="https://mfile03.miyabaobei.com/resources/images/m/domain/icoDomain_02.jpg"
                alt
              />
              <div class="mleft">实名认证</div>
            </div>
            <div class="discounts">
              <div class="mright">
                <span>未认证</span>
              </div>
              <img
                class="imgSize"
                src="https://mfile03.miyabaobei.com/resources/images/m/domain/icoDomain_04.png"
                alt
              />
            </div>
          </div>
        </li>
        <li>
          <div class="gird line">
            <div class="gird">
              <img
                class="imgSize mleft"
                src="https://mfile03.miyabaobei.com/resources/images/m/domain/icoDomain_03.jpg"
                alt
              />
              <div class="mleft">联系客服</div>
            </div>
            <div class="discounts">
              <div class="mrightl">
                <span>10101010</span>
              </div>
              <img
                class="imgSize"
                src="https://mfile03.miyabaobei.com/resources/images/m/domain/icoDomain_04.png"
                alt
              />
            </div>
          </div>
        </li>
        <li>
          <div class="gird line">
            <div class="gird">
              <img
                class="imgSize mleft"
                src="https://mfile03.miyabaobei.com/resources/images/m/domain/icoDomain_03.jpg"
                alt
              />
              <div class="mleft">账户绑定手机号码</div>
            </div>
            <div class="discounts">
              <div class="mrightl">
                <span>13456981234</span>
              </div>
              <img
                class="imgSize"
                src="https://mfile03.miyabaobei.com/resources/images/m/domain/icoDomain_04.png"
                alt
              />
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="martle white">
      <img
        class="wid"
        src="https://img.miyabaobei.com/d1/p6/2020/07/16/f0/9b/f09b151a9616c527937586ebd0e03ce0883078024.jpg"
        alt
      />
      <van-button class="rht" type="danger">立即下载</van-button>
    </div>
    <div class="deflex">
      <div >
        <van-button class="size" type="danger" @click="logout">退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { tokenCook } from "../utils/cookies";
import { mapActions, mapState } from "vuex";
export default {
  name: "setting",
  layout: true,
  methods: {
    ...mapActions("login", ["getinfo"]),
    logout() {
      tokenCook.remove();
      this.$router.push("/login");
    },
  },
  computed: {
    ...mapState("login", ["info"]),
  },
  mounted() {
    let token = tokenCook.get();
    if (!token) {
      this.$router.push("/login");
    } else {
      this.getinfo(token);
    }
  },
  // components:{
  //   Gyzm
  // }
};
</script>

<style  scoped>
.van-nav-bar.van-hairline--bottom {
  background-color: #ea4141;
}

.van-nav-bar >>> .van-icon {
  color: #fff;
}

.van-nav-bar >>> .van-nav-bar__title.van-ellipsis {
  color: #fff;
}

.user {
  width: 100%;
  height: 95px;
  display: flex;
  background-color: white;
}

.martl {
  margin-top: 10px;
  margin-left: 10px;
}

.martle {
  margin-top: 10px;
  padding-left: 10px;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}

.back {
  background-color: rgb(226, 224, 224);
}

.deflex {
      display: flex;
    justify-content: center;
    padding-bottom: 20px;
    margin-top: 20px;
}

.gird {
  margin-top: 1px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding-bottom: 5px;
  padding-top: 5px;
}

.font {
  font-size: 13px;
  margin-top: 10px;
}

.color {
  color: rgb(211, 207, 207);
}

.mtop {
  margin-top: 22px;
  margin-left: 20px;
}

.mleft {
  margin-left: 9px;
}

.backSize {
  width: 48px;
  height: 48px;
  margin-left: 2px;
}

.content {
  margin-top: 10px;
  background-color: white;
}

.imgSize {
  width: 20px;
  height: 20px;
}

.discounts {
  font-size: 14px;
  color: rgb(211, 207, 207);
  display: flex;
  margin-top: 6px;
}

.mright {
  margin-right: 9px;
}

.mrightl {
  margin-right: 9px;
  color: red;
}

.wid {
  height: 35px;
}

.white {
  background-color: white;
}

.rht {
  margin-right: 10px;
  margin-bottom: 10px;
}

.size {
  /* width: 180px;
  margin-top: 40px;
  margin-bottom: 18px;
  margin-left: 82px; */
}
</style>